<template>
  <div style="padding: 40px">
    <div style="margin: 10px 0;">
 
    </div>
    <el-table :data="tableData" border stripe style="width: 100%;">
      <el-table-column type="index" label="序号" width="100px" />
      <el-table-column prop="question" label="发布的问题" />
      <el-table-column prop="petAge" label="发布时间" >
        <template #default="{ row }">
          {{ timeFormat(row.createdAt) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0" type="danger">审核中</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="success">审核通过</el-tag>
          <div v-else>
            <el-tag type="warning">审核未通过</el-tag>
            原因：
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="petAvatar" label="问题照片">
        <template #default="scope">
          <el-image 
            style="width: 100px; height: 100px"
            :src="scope.row.questionAvatar" 
            :preview-src-list="[scope.row.questionAvatar]" fit="cover">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="350">
        <template #default="scope">
          <!-- 编辑按钮  -->
          <el-button  type="primary" @click="handleEdit(scope.row)">审核</el-button>
        </template>
      </el-table-column>
   
    </el-table>
    <el-dialog :visible.sync="dialogVisible" title="审核" width="30%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option key="1" label="审核通过" value="1">
            </el-option>
            <el-option key="2" label="审核不通过" value="2">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描  述">
          <el-input v-model="form.reviewComment" style="width: 70%"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getQuestionAnswerAdminList ,getQuestionAnswerAdmin} from '@/http/answer.js'

export default {
  data() {
    return {
      form: {
        "reviewComment": "",
        "status": '1',
      },
      dialogVisible: false,
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      ttid: '',
      total: 0,
      ttcontent: '',
      tpubTime: '',
      title: '编辑'
    }

  },
  created() {
    this.load()
  },

  methods: {
    timeFormat(time) {
      const date = new Date(time);

      // 获取年、月、日、小时和分钟
      const year = date.getUTCFullYear();
      const month = date.getUTCMonth() + 1; // getUTCMonth() 返回 0-11，所以需要加 1
      const day = date.getUTCDate();
      const hours = date.getUTCHours();
      const minutes = date.getUTCMinutes();

      // 构建格式化的字符串
      return `${year}年${month}月${day}日${hours}点`;
    },
    async load() {
      const { code, message, data } = await getQuestionAnswerAdminList({
        "current": this.currentPage,
        "pageSize": this.pageSize,
      })
      this.tableData = data.records
      this.total = data.total

    },
    add() {
      this.title = '添加'
      this.dialogVisible = true
    },
    // 确认添加
    async save() {
        const { code, message } = await getQuestionAnswerAdmin(this.form)
        if (code == '0') {
          this.$message({
            type: "success",
            message: "审核成功"
          })
        } else {
          this.$message({
            type: "error",
            message: "审核失败"
          })
        }
      this.dialogVisible = false
      this.load()
    },
    // 编辑
    handleEdit(row) {
      console.log(row);
       this.title = '编辑'
      this.form = { postId:row.postId ,   "reviewComment": "",
      "status": '', }
      this.dialogVisible = true
    },

    async handleDelete(row) {
      
      const { code, message } = await getQuestionDelete(row.postId)
      if (code == '0') {
        this.$message({
          type: "success",
          message: "删除成功"
        })
      } else {
        this.$message({
          type: "error",
          message: message
        })
      }
      this.load()  // 删除之后重新加载表格的数据
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()

    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      this.load()
    },
  
  },
  computed: {
    ...mapGetters({
      userRole: 'user/getUserRole'
    })
  }

}
</script>

<style></style>